<template>
  <div>
    <hHeader></hHeader>
    <hRight></hRight>
    <!-- 主体部分 -->
    <div class="pro-show">
      <!-- 开头卡片展示部分 -->
      <div class="begin">
        <h2>产品展示</h2>
        <div class="inlineBlue"></div>
        <p>
          专注互联网信息化服务，用技术与专注，将作品通过艺术和技术的结合，打造精品案例。
        </p>
      </div>
      <!-- nav部分 -->
      <div class="pro-nav-title">
        <div class="lineLeft"></div>
        <a href="javascript:void(0);" class="nav-title">产品展示</a>
        <div class="lineRight"></div>
      </div>
      <!-- 内容 -->
      <div id="card">
        <!-- 标题 -->
        <div class="card-title">
          <div class="title">{{ pList.title }}</div>
        </div>
        <!-- 简介 -->
        <div class="card-intro" >
          <div class="intro-img">
            <img :src="pList.proImg1" alt="" />
          </div>
          <div class="intro-content">
            <h3>简介</h3>
            <p>{{ pList.introP }}</p>
          </div>
        </div>
        <!-- 主要 -->
        <div class="card-main">
          <div class="card-left">
            <div class="text-main">
              <h3>{{ pList.h }}</h3>
              <p v-for="item of pList.pContent" :key="item.index">
                <span>{{ item.sp }}</span>
                {{ item.p }}
              </p>
            </div>
            <div class="main-img">
              <img :src="pList.proImg2" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体部分结束 -->
    <hQuestion></hQuestion>
    <hFooter></hFooter>
  </div>
</template>
<script>
import h_header from "@/components/header/header.vue";
import h_right from "@/components/right/right.vue";
import h_footer from "@/components/footer/footer.vue";
import h_question from "@/components/question/question.vue";
// import { proContent } from '@/config/config.js'
export default {
  components: {
    hHeader: h_header,
    hRight: h_right,
    hQuestion: h_question,
    hFooter: h_footer,
  },
  data() {
    return {
        pList:[],
    };
  },
  created() {
      this.pList = JSON.parse(sessionStorage.getItem('needList'))
      console.log(this.pList)
  },
};
</script>
<style lang="scss">
.begin {
  background: url(../../../assets/service/service.jpg) no-repeat;
}

#card {
  min-width: 1300px;
  width: 100%;
  box-sizing: border-box;
  background: #f6f7fc;
  padding: 30px 150px;
}
// 标题
.card-title {
  margin-bottom: 30px;
  .title {
    text-align: center;
    background: #f2f2f2;
    height: 70px;
    line-height: 70px;
    font-size: 25px;
  }
}
// 介绍
.card-intro {
  height: 300px;
  background: #f2f2f2;
  margin-bottom: 30px;
  display: flex;
  .intro-img {
    height: 100%;
    width: 400px;
    overflow: hidden;
    margin-right: 30px;
    img {
      height: 100%;
      width: 400px;
      &:hover{
          transform: scale(1.3);
      }
    }
  }
  .intro-content {
    padding: 50px 0;
    width: 700px;
    h3 {
      font: {
        size: 25px;
        weight: 400;
      }
      margin: 25px 0;
      padding-left: 30px;
    }
    p {
      margin: 15px 0;
      text-indent: 2em;
      font-size: 15px;
      color: #aaa;
      line-height: 25px;
    }
  }
}

// main
.card-main {
  margin-bottom: 30px;
  height: 500px;
  overflow: auto;
  background: #f2f2f2;
  box-sizing: border-box;
}
.card-left {
    display: flex;
    justify-content: space-between;
  .text-main {
    box-sizing: border-box;
    padding: 50px 100px;
    width: 900px;
    h3 {
      font: {
        size: 20px;
        weight: 500;
      }
      padding-bottom: 30px;
      border-bottom: 1px solid #ccc;
      margin: 20px 0;
    }
    p {
      font-size: 13px;
      color: #666;
      margin: 13px 0;
      span{
          font: {
              weight: 400;
              size: 15px;
          }
          color: #000;
      }
    }
  }
  .main-img {
    box-sizing: border-box;
    overflow: hidden;
    img {
      height: 495px;
      width: 300px;
      &:hover {
        transform: scale(1.3);
      }
    }
  }
}
</style>